<template>
	<view class="profit-wrap page-bg">
		<view class="recharge">
			<view class="title desc">请输入提现金额</view>
			<input class="value" type="text" v-model="amount" placeholder="￥0.00" placeholder-class="placeholder" />
			<view v-if="amount<=0" class="desc">当前收益余额{{balance}}元, <text class="theme" @click='setAmount'>全部提现</text></view>
			<view v-else class="theme">
				<block v-if="serviceCharge===0">不收取任何手续费(费率0%)</block>
				<block v-else>手续费:{{serviceMoney}}(费率{{serviceCharge}}%)</block>
			</view>
		</view>
		
		<view class="pay-type">
			<!-- <view class="pay-type__item">
				<image class="pay-type__icon" src="../../static/common/icon_10.png" mode=""></image>
				<view class="pay-type__type">微信支付</view>
				<image class="pay-type__select" src="../../static/common/icon_07.png" mode=""></image>
			</view>
			<view class="pay-type__item">
				<image class="pay-type__icon" src="../../static/common/icon_09.png" mode=""></image>
				<view class="pay-type__type">支付宝支付</view>
				<image class="pay-type__select" src="../../static/common/icon_07_on.png" mode=""></image>
			</view> -->
			<view class="pay-type__item">
				<image class="pay-type__icon" src="../../static/common/icon_29.png" mode=""></image>
				<view class="pay-type__type">提现到银行卡</view>
				<!-- <image class="pay-type__select" src="../../static/common/icon_07_on.png" mode=""></image> -->
			</view>
			<view class="card-sub">
				<view class="pay-type__item" 
					v-for="item in items" :key='item.id'
					@click="setCurrentBankId(item.id)"
				>
					<view class="pay-type__icon" ></view>
					<view class="pay-type__type">{{item.bankName}}({{item.cardNumber | bankNo}})</view>
					<image v-if="cardId===item.id" class="pay-type__select" src="../../static/common/icon_07_on.png" mode=""></image>
					<image v-else class="pay-type__select" src="../../static/common/icon_07.png" mode=""></image>
				</view>
				
				<view @click="setCurrentBankId(-1)" class="pay-type__item" style="border-bottom: none;"> 
					<view class="pay-type__icon" >+</view>
					<view class="pay-type__type">使用新卡提现</view>
					<image v-if="cardId===-1" class="pay-type__select" src="../../static/common/icon_07_on.png" mode=""></image>
					<image v-else class="pay-type__select" src="../../static/common/icon_07.png" mode=""></image>
				</view>
			</view>
		</view>
		
		<view class="circular-submit" @click="cash">确认提现</view>
		
		<view class="theme circular-tip">预计24小时内到账</view>
		
	</view>
</template>

<script>
	import footerInfo from '../../components/footerInfo.vue'
	import common from '../../utils/common.js'
	import { api } from '../../utils/api.js'
	export default {
		data() {
			return{
				serviceCharge: 0, // 提现手续费
				balance: 0, // 用户可提现余额
				amount: '', // 佣金提现金额
				cardId: '',
				items: [],
				type: null
			}
		},
		onLoad(options) {
			this.balance = options.balance || 0
			this.serviceCharge = options.serviceCharge || 0
			this.type = options.type || 2
			this.getItems()
		},
		methods:{
			// 设置提现金额
			setAmount() {
				if(this.balance <= 0) { this.$showToast('您还没有余额可提现~'); return }
				this.amount = this.balance
			},
			
			getItems() {
				let items = api.getUserCardsAsync({},(res) => {
					 this.items = res.items
					 if(!res.items) { 
						 this.$showModal('温馨提示', '', () => {
							 this.$link('/pages/mine/bankAdd')
						 })
						 uni.showModal({
						 	title: '温馨提示',
							content:'您还没有绑定银行卡,请先绑定银行卡再来提现~',
							success() {
								if (res.confirm) {
								    this.$link('/pages/mine/bankAdd')
								} else if (res.cancel) {
								    uni.navigateBack({
								    	delta:1
								    })
								}
							}
						 })
					 }
				}) 
			},
			
			setCurrentBankId(id) {
				this.cardId = id
				if(id === -1) {
					this.$link('/pages/mine/bankAdd?url=' + '/pages/mine/cash')
				}
			},
			
			cash() {
				if(!this.amount) {this.$showToast('提现金额不足~'); return}
				if(this.type == 2) {
					if(this.amount % 100 !== 0) {
					 	this.$showToast('您的佣金收益不满足提现要求,佣金金额需是100的倍数才能提现哦~'); return
					}
				}
				
				if(this.type == 3) {
					if(this.amount % 20 !== 0) {
						this.$showToast('您的红包余额不满足提现要求,红包余额需是20的倍数才能提现哦~'); return
					}
				}
				
				if(!this.cardId && this.cardId != -1) {this.$showToast('请选择提现银行卡~'); return}
				api.saveUserCash({ cardId: this.cardId, amount: this.amount, type: this.type }, (res) => {
					this.$link('/pages/mine/cashRes?amount='+this.amount)
				})
			},
		},
		
		filters:{
			bankNo(val) {
				val = val || ''
				return val.substr(-4)
			}
		},
		
		computed:{
			serviceMoney: function() {
				return (this.serviceCharge * this.amount / 100).toFixed(2)
			}
		},
		
		components:{
			footerInfo
		}
	}
</script>

<style scoped lang="less">
	@import url('../../app.less');
	.profit-wrap{
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}
	.recharge{
		background-color: @f;
		.br;
		.content-20;
		margin-bottom: 20rpx;
		.value{
			height: 80rpx;
			line-height: 80rpx;
			width: 100%;
			.bb;
			margin-bottom: 20rpx;
		}
		.theme{
			.f24;
		}
	}
	.pay-type{
		.br;
		.card-item{
			height: auto;
			flex-wrap: wrap;
			.card-sub{
				width: 100%;
			}
		}
	}
	.circular-submit{
		margin-top: 50rpx;
	}
	
	
</style>
